<template>
  <ebook-dialog :title="title" ref="dialog">
    <div class="dialog-list-wrapper" v-if="!ifNewGroup">
      <div>
        <div class="dialog-list-item"
             v-for="(item, index) in categoryList" :key="index"
             :class="{'is-add': item.edit  ? item.edit === 1 : false}"
             @click="onGroupClick(item)"
        >
          <div class="dialog-list-item-text">{{item.title}}</div>
          <!-- 当遍历的ID和进入的groupId相等的话-->
          <div class="dialog-list-icon-wrapper" v-if="isInGroup && shelfCategory.id === item.id">
            <span class="iconfont">&#xe763;</span>
          </div>
        </div>
      </div>
    </div>
    <!--    新建书架组合的时候，显示该内容-->
    <div class="dialog-new-group-wrapper" v-else>
      <div class="dialog-input-title-wrapper">
        <span class="dialog-input-title">{{$t('shelf.groupName')}}</span>
      </div>
      <div class="dialog-input-wrapper">
        <div class="dialog-input-inner-wrapper">
          <input type="text" class="dialog-input" v-model="newGroupName" ref="dialogInput">
          <div class="dialog-input-clear-wrapper"
               @click="clear"
               v-show="newGroupName && newGroupName.length > 0">
            <span class="iconfont">&#xe725;</span>
          </div>
        </div>
      </div>
    </div>
    <!--        按钮插槽-->
    <div slot="btn" class="group-dialog-btn-wrapper">
      <div class="dialog-btn" @click="hide">{{$t('shelf.cancel')}}</div>
      <div class="dialog-btn" @click="createNewGroup"
           :class="{'is-empty' : newGroupName && newGroupName.length === 0}"
           v-if="ifNewGroup">{{$t('shelf.confirm')}}
      </div>
    </div>
  </ebook-dialog>
</template>

<script>
import EbookDialog from '../common/Dialog'
import { appendAddToShelf, removeAddFromShelf } from '../../utils/store'
import { saveBookShelf } from '../../utils/localStroage'
import { storeShelfMixin } from '../../utils/mixin'

export default {
  name: 'group-dialog',
  components: {
    EbookDialog
  },
  mixins: [storeShelfMixin],
  props: {
    showNewGroup: {
      type: Boolean,
      default: false
    },
    groupName: String
  },
  computed: {
    defaultCategory () {
      return [
        {
          title: this.$t('shelf.newGroup'),
          edit: 1
        },
        {
          title: this.$t('shelf.groupOut'),
          edit: 2
        }
      ]
    },
    isInGroup () {
      return this.currentType === 2
    },
    category () {
      // 返回item.type为2的书本返回来
      return this.shelfList.filter(item => item.type === 2)
    },
    categoryList () {
      // const list = this.bookList ? this.bookList.filter(item => item.type === 2) : []
      return [...this.defaultCategory, ...this.category].filter(item => (item.edit === 2 && this.isInGroup) || item.edit !== 2 || !item.edit)
    },
    title () {
      return !this.ifNewGroup ? this.$t('shelf.moveBook') : this.$t('shelf.newGroup')
    }
  },
  data () {
    return {
      ifNewGroup: false,
      newGroupName: ''
    }
  },
  methods: {
    hide () {
      this.$refs.dialog.hide()
      setTimeout(() => {
        this.ifNewGroup = false
      }, 200)
    },
    show () {
      this.ifNewGroup = this.showNewGroup
      this.newGroupName = this.groupName
      this.$refs.dialog.show()
    },
    onGroupClick (item) {
      if (item.edit && item.edit === 1) {
        this.ifNewGroup = true
      } else if (item.edit && item.edit === 2) {
        this.moveOutFromGroup(item)
      } else {
        this.moveToGroup(item)
      }
    },
    clear () {
      this.newGroupName = ''
    },
    // 移进分组方法
    moveToGroup (group) {
      // 1、如果是选择的书，则过滤掉书架的哪一本书，找到的话会进大0，否则小于小于0
      this.setShelfList(this.shelfList.filter(book => {
        if (book.itemList) {
          // 讲itemList里面的所选书籍移除掉
          book.itemList = book.itemList.filter(subBook => this.shelfSelected.indexOf(subBook) < 0)
        }
        // return出去才能接着then
        return this.shelfSelected.indexOf(book) < 0
      })).then(() => {
        // 2、将筛选后的数组于所选书架组里的数据进行合并，使用扩展符号
        if (group && group.itemList) {
          group.itemList = [...group.itemList, ...this.shelfSelected]
        }
        // 3、将移动进去的电子书Id进行一个整体修改，保证排序正确
        group.itemList.forEach((item, index) => {
          item.id = index + 1
        })
        this.simpleToast(this.$t('shelf.moveBookInSuccess').replace('$1', group.title))
        this.onComplete()
      })
    },
    moveOutFromGroup () {
      this.moveOutOffGroup(this.onComplete)
    },
    // 新建分组方法
    createNewGroup () {
      // 1、判断分组名是否为空，为空直接返回
      if (!this.newGroupName || this.newGroupName.length === 0) {
        return
      }
      // 假如是编辑名称状态
      if (this.showNewGroup) {
        // 修改该数组的名称
        this.shelfCategory.title = this.newGroupName
        this.onComplete()
      } else {
        // 2、创建一个新对象，type为2，里面列表为空，id为倒数第二，由于此时末尾的type3还没删除
        const group = {
          id: this.shelfList[this.shelfList.length - 2].id + 1,
          itemList: [],
          selected: false,
          title: this.newGroupName,
          type: 2
        }
        // 3、移除掉Type为3，返回一个新列表，再推入刚才新建的对象
        let list = removeAddFromShelf(this.shelfList)
        list.push(group)
        list = appendAddToShelf(list)
        this.setShelfList(list).then(() => {
          // 移动书籍
          this.moveToGroup(group)
        })
      }
    },
    onComplete () {
      saveBookShelf(this.shelfList)
      // 隐藏弹出框
      this.hide()
      // 取消编辑状态
      this.setIsEditMode(false)
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '../../assets/styles/global.styl'
  .dialog-list-wrapper
    width: 100%
    padding: 0 px2rem(20)
    box-sizing: border-box
    font-size: px2rem(14)
    scroll()
    .dialog-list-item
      display: flex
      padding: px2rem(15) 0
      box-sizing: border-box
      color: #666
      &.is-add
        color: $color-blue
        &:active
          color: $color-blue-transparent
      &:active
        color: rgba(102, 102, 102, .5)
      .dialog-list-item-text
        flex: 1
      .dialog-list-icon-wrapper
        flex: 0 0 px2rem(30)
        color: $color-blue
        rightStyle()
  .dialog-new-group-wrapper
    width: 100%
    padding: 0 px2rem(20)
    box-sizing: border-box
    .dialog-input-title-wrapper
      font-size: px2rem(10)
      margin-top: px2rem(20)
    .dialog-input-wrapper
      width: 100%
      padding: 0 0 px2rem(30) 0
      box-sizing: border-box
      .dialog-input-inner-wrapper
        display: flex
        width: 100%
        padding: px2rem(10) 0
        box-sizing: border-box
        border-bottom: px2rem(1) solid #eee
        font-size: px2rem(14)
        color: #666
        .dialog-input
          flex: 1
          border: none
          &:focus
            outline: none
        .dialog-input-clear-wrapper
          flex: 0 0 px2rem(30)
          color: #ccc
          center()
          &:active
            color: #999
  .group-dialog-btn-wrapper
    width: 100%
    center()
  .dialog-btn
    flex: 1
    &.is-empty
      color: rgba(255, 255, 255, .5)
    &:active
      color: rgba(255, 255, 255, .5)
</style>
